<template>
  <div class="video-part">
    <div class="type">
      <el-row>
        <el-col :span="3">
          <span class="type-header">类型:</span>
        </el-col>
        <el-col v-for="item in typeList" :span="4">
          <span :class="item.id==PageData.tid?'type-active type-item':'type-item'" @click="filterType(item.id)">
           {{ item.name }}
          </span>
        </el-col>
      </el-row>
    </div>
    <div class="type" style="margin-bottom: 25px">
      <el-row>
        <el-col :span="3">
          <span class="type-header">播放源:</span>
        </el-col>
        <el-col v-for="item in sourceList" :span="4">
          <span :class="item.id==PageData.sid?'type-active type-item':'type-item'" @click="filterSource(item.id)">
           {{ item.name }}
          </span>
        </el-col>
      </el-row>
    </div>
      <div class="video-list">
        <el-row :gutter="20">
          <el-col v-for="item in videoList" :span="4">
            <a :href="item.sourceUrl" target="_blank">
              <el-card shadow="hover" class="card-item">
                <img :src="item.imgUrl">
                <div class="mask">
                  <div class="date">
                    {{item.date}}
                  </div>
                </div>
              </el-card>
            </a>
              <div class="title">{{item.title.length<=20?item.title:item.title.substring(0, 10)+"..." }}</div>
              <div class="simpleDes">
                {{item.simpleDes}}
              </div>
          </el-col>
        </el-row>
      </div>
    <div class="pagination">
      <el-pagination
          @current-change="handleCurrentChange"
          :page-size="PageData.pageSize"
          layout="prev, pager, next, jumper"
          :total="PageData.total">
      </el-pagination>
    </div>

  </div>

</template>

<script>
import {getVideo} from "@/plugins/api";

export default {
  name: "Video",
  data(){
    return {
      typeList:[
        {
          id:0,
          name:"全部"
        },
        {
          id:1,
          name:"综艺"
        },
        {
          id:2,
          name:"电影"
        },
        {
          id:3,
          name:"纪录片"
        },
        {
          id:4,
          name:"音乐"
        }
      ],
      sourceList:[
        {
          id:0,
          name:"全部"
        },
        {
          id:1,
          name:"爱奇艺"
        },
        {
          id:2,
          name:"腾讯"
        },
        {
          id:3,
          name:"优酷"
        },
        {
          id:4,
          name:"b站"
        }
      ],
      videoList:[
        // {
        //   title: "中国有嘻哈·王者之路",
        //   simpleDes: "GAI侠义豪情传嘻哈能量",
        //   des: "这档纪录片主要讲述6组rapper在节目中的磨砺与成长，身份不同性格各异的他们心怀梦想登上舞台，短暂的夏天让他们生活发生了转变，也让他们经历了一场走向真我的成长蜕变",
        //   date: "2017-11-04",
        //   imgUrl:"https://s1.ax1x.com/2022/05/24/XCms5F.png",
        //   tid:3,
        //   sid:1,
        //   sourceUrl:"https://www.iqiyi.com/lib/m_215524814.html",
        // },
        // {
        //   title: "我们的歌第2季",
        //   simpleDes: "榜样歌手与新声歌手联手同台竞演",
        //   des:"由东方卫视打造的国内首档代际潮音竞演综艺节目启用全新节目模式。让榜样歌手与新声歌手联手同台竞演，推动华语乐坛跨越代际、走向新生，实现华语音乐的传承与创新。节目通过两代艺人的合作，旨在重塑华语乐坛金曲价值，而榜样艺人的音乐精神也将助力新声艺人灵感迸发，催生出更多现象级歌曲，让华语音乐和华语歌手保持青春感，唱出青春样。",
        //   date: "2020-10-11",
        //   imgUrl:"https://s1.ax1x.com/2022/05/24/XCTrj0.png",
        //   tid:1,
        //   sid:1,
        //   sourceUrl:"https://www.iqiyi.com/a_113bsfhrytp.html",
        // },
        // {
        //   title: "少年说唱企划",
        //   simpleDes: "发掘、培养说唱新人",
        //   des: "说唱圈急需新鲜的说唱歌手。Rap star是可以被培养的吗？带着这个思考，爱奇艺成立了一家说唱经纪公司，邀请业界知名且专业的合伙人一起开展“少年说唱企划”，发掘、培养说唱新人，颠覆传统说唱歌手的成长路径。",
        //   date: "2021-07-31",
        //   imgUrl:"https://s1.ax1x.com/2022/05/24/XC7rPH.png",
        //   tid:1,
        //   sid:1,
        //   sourceUrl:"https://www.iqiyi.com/v_1uavckozilc.html",
        // },
        // {
        //   title: "爆裂说唱",
        //   simpleDes: "饰演:老卡",
        //   des: "影片讲述了面临家庭危机的夜场歌手老卡（GAI饰演），与不被父亲理解的待业青年赵泽（徐圣恩饰演），在各自跌宕起伏的人生中，始终坚持说唱梦想，最终逆袭登上舞台展开battle的励志故事。影片生动地展现了说唱歌手名扬四海背后的辛酸经历，让观众看到了在热血逆袭背后的追梦人对舞台不屈不挠的斗志。",
        //   date: "2017-11-04",
        //   imgUrl:"https://s1.ax1x.com/2022/05/24/XCbcHf.png",
        //   tid:2,
        //   sid:1,
        //   sourceUrl:"https://www.iqiyi.com/v_19rr5hkoyw.html",
        // },
        // {
        //   title: "蒙面唱将",
        //   simpleDes: "悬疑性和音乐性是节目的核心所在",
        //   des: "蒙面的音乐性依然是节目的灵魂。在节目组“求专求精”的匠人精神下，节目从选曲到编曲，音乐品质不断擢升，更具多元化",
        //   date: "2017-11-03",
        //   imgUrl:"https://s1.ax1x.com/2022/05/24/XCLdld.png",
        //   tid:1,
        //   sid:3,
        //   sourceUrl:"https://v.youku.com/v_show/id_XMzE3MTk5MzczNg==.html?spm=a2h0c.8166622.PhoneSokuProgramSeries_2.dtitle_3&s=efbfbd66efbfbd365eef",
        // },
        // {
        //   title: "中国潮音 第五期",
        //   simpleDes: "中国元素和潮流音乐创意融合",
        //   des: "该节目集结全球华人音乐中各圈层、各领域的音乐人和表演者，将中国元素和潮流音乐充分创意融合，展现国潮音乐的独特魅力，表达年轻人的音乐态度和文化自信",
        //   date: "2021-12-10",
        //   imgUrl:"https://s1.ax1x.com/2022/05/24/XCOO58.png",
        //   tid:1,
        //   sid:3,
        //   sourceUrl:"https://v.youku.com/v_show/id_XNTIwMDQ3NjgwMA==.html?spm=a2h0c.8166622.PhoneSokuProgram_1.dselectbutton_22&showid=fdadb56dacd54dd7af35",
        // },
        // {
        //   title: "草莓星球来的人",
        //   simpleDes: "竞演抢夺顶级户外音乐节舞台",
        //   des: "该节目陪伴24组新血音乐人为梦想登陆草莓星球，通过竞演的方式，抢夺顶级户外音乐节舞台",
        //   date: "2021-07-09",
        //   imgUrl:"https://s1.ax1x.com/2022/05/24/XCx8iV.png",
        //   tid:1,
        //   sid:3,
        //   sourceUrl:"https://v.youku.com/v_show/id_XNTE1OTkyNDEzNg==.html?spm=a2hbt.13141534.1_3.1&s=dadc4d0f10d943ab9537&scm=20140719.apircmd.61519.video_XNTE1OTkyNDEzNg==",
        // },
        // {
        //   title: "火星情报局 第五季",
        //   simpleDes: "守护提案，舌战群儒",
        //   des: "旨在纵容一切新奇有趣的发现，以特工为单位，守护提案，舌战群儒。激活全民洞察潜能，提出建设性提议",
        //   date: "2021-11-09",
        //   imgUrl:"https://s1.ax1x.com/2022/05/24/XP9xuF.png",
        //   tid:1,
        //   sid:3,
        //   sourceUrl:"https://v.youku.com/v_show/id_XNDg0ODIzNjc3Mg==.html?spm=a2h0c.8166622.PhoneSokuThreeProgram_1.dposter_4&s=ceacba3689f8468ebbfc",
        // },
      ],
      PageData: {
        pageNo:1,
        pageSize:6,
        total:100,
        tid:0,
        sid:0,
      }
    }
  },
  methods:{
    filterType(tid){
      this.PageData.tid = tid
      this.PageData.page = 1
      this.getVideoData()
    },
    filterSource(sid){
      this.PageData.sid = sid
      this.PageData.page = 1
      this.getVideoData()
    },
    getVideoData(){
      var urlSearchParams = new URLSearchParams();
      urlSearchParams.set("pageNo", this.PageData.pageNo)
      urlSearchParams.set("pageSize", this.PageData.pageSize)
      urlSearchParams.set("sid", this.PageData.sid)
      urlSearchParams.set("tid", this.PageData.tid)
      let _this = this
      getVideo(urlSearchParams).then(function (msg) {
        _this.videoList=[];
        _this.videoList = msg.data.pageList.records;
        _this.PageData.total = msg.data.pageList.total
      })

    },
    handleCurrentChange(val){
      this.PageData.pageNo = val
      this.getVideoData()
    }

  },
  created() {
    this.getVideoData()
  }
}
</script>

<style scoped>
.video-part{
  width: 1400px;
  margin: auto;
}
.type{
  margin-bottom: 10px;
}
.type-header{
  width:60%;
  text-align:right;
  display: inline-block;
  margin-right: 10px;
}
.type-item{
  display: inline-block;
  width:60%;
  text-align: center;
}
.type-item:hover{
  color:rgb(245, 132, 84);

}
.type-active{
  color:rgb(245, 132, 84);
  background-color: #fcfcfc;
}
.card-item{
  height:300px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.card-item:hover img{
  transform:scale(1.07) translateZ(0);
  transition: transform .75s;
}


/deep/.el-card__body {
  padding: 0px;
}
img{
  width:100%;
  height:auto;
}
.simpleDes{
  color: rgb(153, 153, 153);
}
.mask{
  background:url(../assets/slide-mask.png) no-repeat center top;
  /*background-color: red;*/
  color: white;
  font-size: 13px;
  height: 22px;
  width: 100px;
  position:absolute;
  bottom:5px;
  right: 0px;
  text-align: center;
  border-radius: 8px;
}

</style>